<template>
  <Drawer placement="right" width="30" :closable="false" v-model="detailDraw">
    <div slot="header" class="head-sty">
      <Icon type="md-close" size="24" color="#242424" class="close" @click="close" />
      <div class="title">{{ $t('promote.trading_particulars') }}</div>
    </div>
    <div class="content">
      <div class="sub-title">{{ transTypeCom(detailInfo.tradeType) }}</div>
      <div class="amount">
        <span class="price" v-if="detailInfo.tradeAmount > 0" style="color: #FF186B;">
          +{{ detailInfo.tradeAmount }}
        </span>
        <span class="price" v-else style="color: #1E1714;">
          {{ detailInfo.tradeAmount }}
        </span>
        <span class="symbol">CNY</span>
      </div>
      <div class="status">{{ $t('user.status') }}：{{ statusComp(detailInfo.status) }}</div>
      <!-- 拒绝提现原因 -->
      <div class="refuse-reason" v-if="detailInfo.status === 1">{{ $t('promote.reasons_for_refusing_withdraw') }}： {{
        detailInfo.rejectReason }}</div>
      <!-- 已全额退款 > -->
      <div class="refuse-reason cus-text" v-if="detailInfo.relatedRecord !== null">{{ $t('promote.fully_refunded') }}
      </div>
      <!-- 已退款原因 -->
      <div class="refuse-reason" v-if="detailInfo.status === 3">{{ $t('promote.refund_cause') }}：
        {{ $t('promote.refund_cause_desc') }}</div>
      <div class="card-sty">
        <div class="list-info" v-if="detailInfo.relatedRecord !== null">
          <span class="label">{{ $t('promote.relevant_record') }}：</span>
          <span class="num-text record-text" @click="returnInfo(detailInfo.relatedRecord)">{{
            $t('promote.look_relevant_record') }}</span>
        </div>
        <Divider v-if="detailInfo.relatedRecord !== null" />
        <div class="list-info">
          <span class="label">{{ $t('user.tradingTime') }}：</span>
          <span class="num-text">{{ detailInfo.tradeTime }}</span>
        </div>
        <div class="list-info">
          <span class="label">{{ $t('user.transactionNumber') }}：</span>
          <span class="num-text">{{ detailInfo.tradeNo }}</span>
          <Icon type="ios-copy" size="20" color="#767B93" @click="copyMet(detailInfo.tradeNo)"
            style="cursor: pointer;" />
        </div>
        <div class="list-info">
          <span class="label">{{ $t('promote.in_or_out') }}：</span>
          <span class="num-text" v-if="detailInfo.incomeExpenseType === 1">{{ $t('promote.earning_text') }}</span>
          <span class="num-text" v-if="detailInfo.incomeExpenseType === 2">{{ $t('promote.expend_text') }}</span>
        </div>
        <div class="list-info">
          <span class="label">{{ $t('promote.currency_code') }}：</span>
          <span class="num-text">{{ detailInfo.tradeCurrency }}</span>
        </div>
        <div class="list-info">
          <span class="label">{{ $t('promote.currency_amount') }}：</span>
          <span class="num-text">{{ detailInfo.tradeAmount }}</span>
        </div>
        <div class="list-info">
          <span class="label">{{ $t('promote.currency_after_amount') }}：</span>
          <span class="num-text">{{ detailInfo.balanceAmount }}</span>
        </div>
        <div class="list-info">
          <span class="label">{{ $t('promote.currency_type') }}：</span>
          <span class="num-text">{{ transTypeCom(detailInfo.tradeType) }}</span>
        </div>
        <div class="list-info">
          <span class="label">{{ $t('promote.currency_desc') }}：</span>
        </div>
        <div class="num-text">{{ detailInfo.changeRmk }}</div>
      </div>
      <!-- 收款人信息 -->
      <div class="card-sty"
        v-if="detailInfo.tradeType === 'COMMISSION_WITHDRAW' || detailInfo.tradeType === 'REFUND_COMMISSION_WITHDRAW'">
        <div class="title-sty">
          <span class="sub-label">{{ $t('promote.received_people_info') }}</span>
          <Icon type="md-eye" size="24" color="#767B93" v-if="infoShow" @click="infoShow = false" class="eye-icon" />
          <Icon type="md-eye-off" size="24" color="#767B93" v-else @click="infoShow = true" class="eye-icon" />
        </div>
        <div class="list-info">
          <span class="label">{{ $t('promote.received_people_name') }}：</span>
          <span class="num-text" v-if="infoShow">{{ detailInfo.payeeName }}</span>
          <span class="num-text" v-else>
            {{ detailInfo.payeeName.charAt(0) + '****' + detailInfo.payeeName.charAt(detailInfo.payeeName.length - 1) }}
          </span>
        </div>
        <div class="list-info">
          <span class="label">{{ $t('user.close_channel') }}：</span>
          <span class="num-text">{{ detailInfo.payeeChannelCode }}</span>
        </div>
        <div class="list-info">
          <span class="label">{{ $t('promote.received_account_number') }}：</span>
          <span class="num-text" v-if="infoShow">{{ detailInfo.payeeAccount }}</span>
          <span class="num-text" v-else>
            {{ detailInfo.payeeAccount.charAt(0) + '****' +
              detailInfo.payeeAccount.charAt(detailInfo.payeeAccount.length - 1) }}
          </span>
        </div>
        <div class="list-info">
          <span class="label">{{ $t('user.recipientCurrency') }}：</span>
          <span class="num-text">{{ detailInfo.currency }}</span>
        </div>
        <div class="list-info">
          <span class="label">{{ $t('promote.received_amount') }}：</span>
          <span class="num-text">{{ detailInfo.paymentAmount }}</span>
        </div>
      </div>
    </div>
  </Drawer>
</template>
<script>

export default {
  data() {
    return {
      detailDraw: false,
      detailInfo: {},
      infoShow: false
    }
  },
  methods: {
    open(info) {
      this.detailInfo = info;
      this.detailDraw = true;
    },
    close() {
      this.detailDraw = false;
    },
    transTypeCom(type) {
      switch (type) {
        case 'COMMISSION_SETTLEMENT':
          return this.$t('personal.ShippingFees');
        case 'GOODS_COMMISSION_SETTLEMENT':
          return this.$t('routerTitle.product_title_name');
        case 'COMMISSION_BALANCE_QC_SHARE_ADD':
          return this.$t('promote.yel_tit_card');
        case 'COMMISSION_WITHDRAW':
        case 'REFUND_COMMISSION_WITHDRAW':
          return this.$t('user.balanceWithdrawal');
        case 'COMMISSION_BALANCE_MANUAL_ADD':
        case 'COMMISSION_BALANCE_MANUAL_SUB':
          return this.$t('promote.adjustment_of_balance');
        default:
          return '';
      }
    },
    statusComp(status) {
      switch (status) {
        case 0:
          return this.$t('promote.status_in_hand');
        case 1:
          return this.$t('promote.status_refused');
        case 2:
          return this.$t('user.completed');
        case 3:
          return this.$t('user.refunded_text');
        default:
          return '';
      }
    },
    returnInfo(info) {
      this.detailInfo = info;
    },
    copyMet(content) {
      navigator.clipboard.writeText(content).then(() => {
        this.$Message.success(this.$t("public.copySuccess"));
      }).catch(() => {
        this.$Message.error(this.$t("public.copyFail"));
      });
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-drawer-header) {
  padding: 38px 35px;
  border: none;
}

:deep(.ivu-drawer-body) {
  padding-right: 38px;
  padding-left: 38px;
  padding-top: 10px;
  padding-bottom: 294px;
}

.head-sty {
  display: flex;
  align-items: center;

  .close {
    cursor: pointer;
  }

  .title {
    font-family: Open Sans, Open Sans;
    font-weight: 400;
    font-size: 24px;
    color: #8D8D8D;
    line-height: 28px;
    margin: 0 auto;
  }
}

.content {
  font-family: PingFang SC, PingFang SC;

  .sub-title {
    font-weight: 600;
    font-size: 20px;
    color: #1E1714;
    line-height: 23px;
    margin-bottom: 15px;
  }

  .amount {

    .price {
      font-weight: bold;
      font-size: 53px;
      line-height: 62px;
    }

    .symbol {
      font-weight: 400;
      font-size: 24px;
      line-height: 28px;
      margin-left: 8px;
    }
  }

  .status {
    font-weight: 600;
    font-size: 32px;
    color: #1E1714;
    line-height: 38px;
    margin-top: 26px;
  }

  .refuse-reason {
    font-weight: 400;
    font-size: 20px;
    color: #F79831;
    line-height: 23px;
    margin-top: 17px;
  }

  .cus-text {}

  .card-sty {
    padding: 15px 0 51px 34px;
    background: #F8F8FA;
    border-radius: 13px 13px 13px 13px;
    margin-top: 30px;

    .title-sty {

      .sub-label {
        font-weight: 600;
        font-size: 24px;
        color: #1E1714;
        line-height: 28px;
      }

      .eye-icon {
        cursor: pointer;
        margin-left: 21px;
      }
    }

    .list-info {
      margin-top: 24px;

      .label {
        min-width: 157px;
        display: inline-block;
        font-weight: 400;
        font-size: 20px;
        color: #959595;
        line-height: 23px;
      }

      .num-text {
        font-weight: 400;
        font-size: 20px;
        color: #1E1714;
        line-height: 23px;
        margin-right: 4px;
      }

      .record-text {
        font-weight: 400;
        font-size: 20px;
        color: #FF186B;
        line-height: 23px;
        cursor: pointer;
      }
    }

    .num-text {
      font-weight: 400;
      font-size: 20px;
      color: #1E1714;
      line-height: 23px;
      white-space: normal;
      word-break: break-all;
      margin-top: 12px;
      margin-right: 24px;
    }
  }
}
</style>